<template>
  <div class="main">
    <!-- 若获取用户头像成功，就显示用户头像 -->
    <img v-if="header"
      :src="defaultImg[0]"
      alt="头像"
    />
    <!-- 若获取用户头像失败，判断用户性别，显示默认头像 -->
    <img v-if="!header"
      :src="this.userData.sex == 'boy' ? defaultImg[1] : defaultImg[2]"
      alt="头像"
    />
    <!-- 上传头像按钮 -->
    <div id="uploadHeader">
      点击上传头像
      <input type="file" @change="uploadImg" />
    </div>
    <h1>
      {{ userData.username ? userData.username : "用户名" }}
      <p>
        {{
          userData.description
            ? userData.description
            : "这个用户很懒，什么都没留下"
        }}
      </p>
    </h1>
    <ul>
      <h2>基本信息</h2>
      <!-- 昵称 -->
      <li
        @mouseenter="compileShow.name = !inputShow.name"
        @mouseleave="compileShow.name = false"
      >
        用户昵称
        <p>
          {{ userData.username ? userData.username : "用户名" }}
        </p>
        <div class="compile" v-show="compileShow.name" @click="Change('name')">
          编辑
        </div>
        <input
          type="text"
          v-show="inputShow.name"
          v-model="inputData.username"
          placeholder="请输入昵称"
        />
        <button
          v-show="inputShow.name"
          @click="ChangeSubmit('name')"
          style="background-color: #6d5ed4"
        >
          提交
        </button>
        <button v-show="inputShow.name" @click="inputShow.name = false">
          取消
        </button>
      </li>
      <!-- id -->
      <li>
        用户ID&nbsp;&nbsp;&nbsp;
        <p>{{ userData.id ? userData.id : "用户ID" }}</p>
      </li>
      <!-- 性别 -->
      <li
        @mouseenter="compileShow.sex = !inputShow.sex"
        @mouseleave="compileShow.sex = false"
      >
        性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <p>{{ userData.sex ? userData.sex : "用户性别" }}</p>
        <div class="compile" v-show="compileShow.sex" @click="Change('sex')">
          编辑
        </div>
        <div class="sexBox" v-show="inputShow.sex">
          <input
            type="radio"
            name="sex"
            v-model="inputData.sex"
            value="boy"
          />男<input
            type="radio"
            v-model="inputData.sex"
            value="girl"
            name="sex"
          />女
          <button
            v-show="inputShow.sex"
            @click="ChangeSubmit('sex')"
            style="background-color: #6d5ed4"
          >
            提交
          </button>
          <button v-show="inputShow.sex" @click="inputShow.sex = false">
            取消
          </button>
        </div>
      </li>
      <!-- 邮箱 -->
      <li
        @mouseenter="compileShow.mail = !inputShow.mail"
        @mouseleave="compileShow.mail = false"
      >
        邮箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <p>
          {{ userData.mail ? userData.mail : "用户名" }}
        </p>
        <div class="compile" v-show="compileShow.mail" @click="Change('mail')">
          编辑
        </div>
        <input
          type="text"
          v-show="inputShow.mail"
          v-model="inputData.mail"
          :placeholder="emailCheck ? '请输入验证码' : '请输入邮箱'"
        />
        <button
          v-show="inputShow.mail"
          @click="ChangeSubmit('mail')"
          style="background-color: #6d5ed4; width: 100px"
        >
          {{ emailCheck ? "提交" : "发送验证码" }}
        </button>
        <button v-show="inputShow.mail" @click="inputShow.mail = false">
          取消
        </button>
      </li>
      <!-- 简介 -->
      <li
        @mouseenter="compileShow.description = !inputShow.description"
        @mouseleave="compileShow.description = false"
      >
        个人简介
        <p>
          {{
            userData.description
              ? userData.description
              : "这个用户很懒，什么都没留下"
          }}
        </p>
        <div
          class="compile"
          v-show="compileShow.description"
          @click="Change('description')"
        >
          编辑
        </div>
        <button
          v-show="inputShow.description"
          @click="ChangeSubmit('description')"
          style="background-color: #6d5ed4"
        >
          提交
        </button>
        <button
          v-show="inputShow.description"
          @click="inputShow.description = false"
        >
          取消
        </button>
        <textarea
          name=""
          id=""
          cols="50"
          rows="5"
          v-show="inputShow.description"
          v-model="inputData.description"
          placeholder="请输入您的简介"
        >
        </textarea>
      </li>
    </ul>
  </div>
</template>

<script>
import { isAvailableEmail } from "@/tool/EmailCheck";
import { getCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      // 头像是否获取成功标志位
      header:false,
      // 头像地址数组
      defaultImg: [
        "http://localhost:8181/user/header/" + getCookie("userId"),
        require("@/assets/boyUser.jpg"),
        require("@/assets/girlUser.jpg")
      ],
      displayedImg: 0,
      // 控制input框的显示
      inputShow: {
        name: false,
        sex: false,
        description: false,
        mail: false,
      },
      // 控制编辑按钮的显示
      compileShow: {
        name: false,
        sex: false,
        description: false,
        mail: false,
      },
      // 用户数据
      userData: {
        id: this.$route.params.id,
        username: this.$route.params.username,
        mail: this.$route.params.mail,
        sex: this.$route.params.sex,
        description: this.$route.params.description,
      },
      // 输入的用户数据
      inputData: {
        username: "",
        mail: "",
        sex: "",
        description: "",
      },
      emailCheck: false, // 邮箱标志位，false表示框中是邮箱，true表示框中是验证码
      // 前后端交互数据
      webInfo: {
        emailCheck: "",
        userInputEmail: "",
      },
    };
  },
  methods: {
    // 点击编辑按钮事件
    Change(item) {
      if (item == "name") {
        this.compileShow.name = false;
        this.inputShow.name = true;
        return;
      }
      if (item == "description") {
        this.compileShow.description = false;
        this.inputShow.description = true;
        return;
      }
      if (item == "mail") {
        this.compileShow.mail = false;
        this.inputShow.mail = true;
        return;
      }
      if (item == "sex") {
        this.compileShow.sex = false;
        this.inputShow.sex = true;
      }
    },
    // 发送请求更改用户信息
    ChangeSubmit(item) {
      var value = "";
      // 判断修改的是用户的什么信息
      if (item == "name") {
        value = this.inputData.username;
      }
      if (item == "description") {
        value = this.inputData.description;
      }
      if (item == "mail") {
        // 判断是否是邮箱格式
        if (!this.emailCheck && !isAvailableEmail(this.inputData.mail)) {
          alert("请输入正确的邮箱格式");
          return;
        }
        // 若修改的是邮箱，应先发送邮箱验证码
        if (!this.emailCheck) {
          // 发送验证码
          this.$axios({
            method: "post",
            url: "http://localhost:8181/user/emailCheck",
            data: {
              mail: this.inputData.mail,
              username: this.userData.username,
            },
          }).then(
            (res) => {
              console.log("邮箱验证码发送成功！", res.data);
              alert("验证码已发送，注意查收");
              // 接收后端发送的邮箱验证码
              this.webInfo.emailCheck = res.data;
            },
            (err) => {
              console.log("发送失败！", err);
              alert("验证码发送失败");
            }
          );
          // 修改邮箱标志位，下次点击判断验证码
          this.emailCheck = true;
          // 将邮箱存入数据
          this.webInfo.userInputEmail = this.inputData.mail;
          // 清空邮箱框内容
          this.inputData.mail = "";
          return;
        }
        // 判断验证码是否正确
        if (this.webInfo.emailCheck != this.inputData.mail) {
          alert("验证码不正确！请重试");
          // 清空邮箱框内容
          this.inputData.mail = "";
          // 标志位回正
          this.emailCheck = false;
          return;
        }
        // 验证码正确，改数据库
        value = this.webInfo.userInputEmail;
      }
      if (item == "sex") {
        value = this.inputData.sex;
      }
      // 发送请求更改用户数据
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/user/updateUserById/" +
          item +
          "/" +
          value +
          "/" +
          getCookie("userId"),
      }).then(
        (res) => {
          if (res.data.data.update) {
            alert("编辑成功");
            // 更新成功,刷新数据
            if (item == "name") this.userData.username = value;
            if (item == "description") this.userData.description = value;
            if (item == "mail") this.userData.mail = value;
            if (item == "sex") this.userData.sex = value;
            // 点击所有的取消按钮，隐藏input编辑框
            this.inputShow.description = false;
            this.inputShow.sex = false;
            this.inputShow.name = false;
            this.inputShow.mail = false;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 上传头像事件
    uploadImg(event) {
      const file = event.target.files[0];
      // 进行一些校验...
      const formData = new FormData();
      formData.append("file", file);
      this.$axios({
        method: "post",
        url: "http://localhost:8181/user/uploadHeader/" + getCookie("userId"),
        data: formData,
        Headers: {
          "Content-type": "multipart/form-data",
        },
      }).then(
        (res) => {
          if (res.data) {
            alert("上传成功！")
            this.$router.replace({
              path:'/main/myNode/lately',
              query:{
                id:this.$route.params.id
              }
            })
          }
          console.log("头像上传成功" + res);
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  mounted() {
    //  读取用户头像
    this.$axios({
      method:'get',
      url: "http://localhost:8181/user/header/" + getCookie("userId")
    }).then(
      (res) => {
        // 若头像获取成功
        if(res.data!=false) {
          this.header = true
        }
        // 头像获取失败，使用默认头像
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
.main {
  height: auto;
  padding-bottom: 30px;
}
img {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 20px;
  cursor: pointer;
  background-color: #55556d6d;
  border: solid 4px #55556d;
}
h1 {
  cursor: pointer;
  height: 99px;
  position: relative;
  font-size: 60px;
  color: #fff;
  padding: 10px 0 10px 160px;
  margin-bottom: 20px;
}
h1 > p {
  font-size: medium;
  position: absolute;
  color: #55556d;
}
ul {
  list-style: none;
  color: #fff;
}
h2 {
  font-size: 30px;
  border-bottom: #55556d solid 1px;
  padding-left: 20px;
}
li {
  font-size: large;
  margin: 30px 0 0 30px;
}
li > p {
  font-size: medium;
  display: inline-block;
  margin-left: 30px;
  cursor: pointer;
}

.compile {
  display: inline-block;
  font-size: smaller;
  margin-left: 20px;
  color: #55556d;
  cursor: pointer;
}
.sexBox {
  display: inline-block;
  margin-left: 20px;
}
input[type="text"] {
  border: #55556d 0.5px solid;
  margin: 0 10px 0 20px;
  background: none;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  height: 20px;
  width: 150px;
  outline: none;
}
button {
  margin-left: 10px;
  background: none;
  outline: none;
  border: #6d5ed4 0.5px solid;
  border-radius: 10px;
  height: 25px;
  width: 50px;
  color: #fff;
  font-size: small;
  cursor: pointer;
}
input[type="radio"] {
  margin: 0 5px 0 10px;
}
textarea {
  display: block;
  margin: 10px 0 10px 0;
  outline: none;
  background-color: #242834;
  border: #55556d 0.5px solid;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  min-width: 300px;
  min-height: 40px;
  max-height: 100px;
  max-width: 500px;
  font-size: larger;
}
#uploadHeader {
  position: absolute;
  left: 40px;
  top: 120px;
  color: #55556d;
  height: 30px;
  width: 100px;
  text-align: center;
}
#uploadHeader:hover {
  overflow: hidden;
  color: #6d5ed4;
}
#uploadHeader > input {
  cursor: pointer;
  height: 30px;
  width: 200px;
  z-index: 10;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
}
</style>